<!-- 使用方法
<mUpload action="unitUserInfo/uploadUnitFile"
  :data="{
    unitId: _d.form.id
  }"
  type="image"
  typeError="请上传图片"
  @done="uploadDone">
  <div class="file-img-btn">
    <div v-if="_d.fileImg" class="img-box">
      <div class="t-mask">
        <upload-outlined class="icon"/>
        <eye-outlined class="icon" @click.stop="showPreview()"/>
      </div>
      <img :src="_d.fileImg"/>
    </div>
    <div v-else class="text">+</div>
  </div>
</mUpload>


// 上传文件
function uploadDone(res, info) {
	if(res.code == 200) {
		message.success('上传PDF成功');
		_d.form.fileList.file_name = res.data.old_file_name;
		_d.form.fileList.file_id = res.data.file_id;
	} else {
		message.error('上传PDF失败');
	}
}

.file-img-btn {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px dashed #d7d7d7;
  font-size: 24px;
  text-align: center;
  line-height: 98px;
  &:hover {
    border-color: #1890FF;
    .img-box .t-mask {
      opacity: 1;
    }
  }
  .t-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s;
    font-size: 18px;
    .icon {
      cursor: pointer;
      &+.icon {
        margin-left: 15px;
      }
    }
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
 -->
<template>
  <a-upload v-model:file-list="_d.fileList"
    name="file"
    :show-upload-list="false"
    :action="action"
    :data="props.data"
    :headers="_d.headers"
    :before-upload="beforeUpload"
    @change="handleUploadChange">
	  <a-button v-if="!slots.default">导入</a-button>
	  <slot></slot>
	</a-upload>
</template>

<script setup>
	import { reactive, computed, useSlots } from 'vue'
	import { notification, message } from 'ant-design-vue';
	import {TOKEN_ACCESS_KEY, CLOUD_PATH} from "@/api"

	import {ls} from 'qlrz-service'

	const slots = useSlots();

	const emit = defineEmits(['done']);

	const props = defineProps({
		// 接口
		action: {
			type: String,
			default: ''
		},
		// 参数
		data: {
			type: Object
		},
		// 文件类型
		type: {
			type: [Array, String],
			default: 'excel'
		},
		// 类型错误提示
		typeError: {
			type: String,
			default: '请上传excel文档！'
		},
		// 文件大小限制，10M
		limit: {
			type: Number,
			default: 10
		}
	})

	const _d = reactive({
		fileList: [],
		headers: {
			Authorization: "Bearer " + ls.get(TOKEN_ACCESS_KEY),
			accepts: 'application/json',
			"Load-Balancer": import.meta.env.VITE_APP_LOCAL_IP,
		}
	})

	// 接口路径
	const action = computed(() => {
		return props.action ? CLOUD_PATH+props.action : '';
	})

	// 文件上传类型
	const fileType = computed(() => {
		let res = props.type;
		if(typeof res == 'string') {
			if (props.type == 'excel') {
				res = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/wps-office.xlsx', 'application/wps-office.xls'];
			} else if (props.type == 'image') {
				res = ['image/png', 'image/jpeg'];
			} else {
				res = [res];
			}
		}
		return res;
	})

	// 上传之前验证
	function beforeUpload(file) {
    if(fileType.value.indexOf(file.type) == -1) {
    	message.error(props.typeError);
    	return false;
    }

    const isLt2M = file.size / 1024 / 1024 <= props.limit;
    if (!isLt2M) {
      message.error('文件不能大于' + props.limit + 'MB!');
      return false;
    }
    return true;
	}

	// 上传完成
	function handleUploadChange(info) {
		if (info.file.status !== 'uploading') {}
    if (info.file.status === 'done') {
    	emit('done', info.file.response, info);
    } else if (info.file.status === 'error') {
    	notification.error({
    		message: '提示',
        description: `${info.file.name} 上传失败.`
    	})
    }
	}

</script>

<style scoped>

</style>